﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Real-Time Notifications</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"
            integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
            crossorigin="anonymous"></script>

    <script data-main="scripts/main" src="https://rawgit.com/radu-matei/websocket-manager/master/src/WebSocketManager.Client.TS/dist/WebSocketManager.js"></script>

</head>

<body>
    <h1>This should be mapped to "/notifications"</h1>
    <input type=text id="textInput" placeholder="Enter your text" />
    <button id="sendButton">Send</button>

    <ul id="messages"></ul>

    <script language="javascript" type="text/javascript">

        var connection = new WebSocketManager.Connection("ws://localhost:" + location.port + "/notifications");

        connection.clientMethods["receiveMessage"] = (message) => {
            var messageText = "Someone said: " + message;

            console.log(messageText);
            appendItem(list, messageText);
        };

            connection.start();

        var list = document.getElementById("messages");
        var button = document.getElementById("sendButton");


        button.addEventListener("click", function() {

            var input = document.getElementById("textInput");
            sendMessage(input.value);

            input.value = "";
        });

        function sendMessage(message) {
            console.log("Sending through HTTP to a controller:" + message);

            $.ajax({
                url: "http://" + window.location.host + "/api/messages/sendmessage?message=" + message,
                method: 'GET'
            });
        }

        function appendItem(list, message) {
            var item = document.createElement("li");
            item.appendChild(document.createTextNode(message));
            list.appendChild(item);
        }


    </script>
</body>

</html>